<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=LexiGulimWeb' rel='stylesheet' type='text/css' />
<link type="text/css" href="/Yogiro/css/jquery-ui.css" rel="stylesheet"/>	
<script type="text/javascript" src="/Yogiro/js/jquery.js"></script>
<script type="text/javascript" src="/Yogiro/js/jquery-ui.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
	var id = $("#registerId").val();
	if(id==""){
		document.reg.id.focus();
	};
	$("#register").on("click",function(){
		var id = $("#registerId").val();
		var password = $("#registerPwd").val();
		var name = $("#name").val();
		var birthday = $("#bir").val();
		var detail = $("#detailchk").val();
		var zipcode = $("#zipcode").val();
		var address1 = $("#address1").val();
		var address2 = $("#address2").val();
		$.ajax({
			"url":"member.do",
			"type":"post",
			"data": {"method":"registerMember", "id":id, "password":password, "name":name,
				     "birthday":birthday, "detail":detail, "zipcode":zipcode, "address1":address1, "address2":address2 },
			"dataType":"json",
			"beforeSend":function(){
				if(!id){
					alert("ID가 입력되지 않았습니다.");
					document.reg.id.focus();
					return false ;
				}
				if(!password){
					alert("비밀번호가 입력되지 않았습니다.");
					document.reg.password.focus();
					return false ;
				}
				if(!name){
					alert("가입자 이름이 입력되지 않았습니다.");
					document.reg.name.focus();
					return false ;
				}
				if(!birthday){
					alert("생년월일이 입력되지 않았습니다.");
					document.reg.birthday.focus();
					return false ;
				}
				if(!detail){
					alert("주민등록 번호 뒷자리가 입력되지 않았습니다.");
					document.reg.detail.focus();
					return false ;
				} 
				if (detail.length!=7) {
					alert("올바른 주민등록번호를 입력하십시요.");
					document.reg.detail.focus();
					return false ;
				}
				if(!zipcode){
					alert("우편번호가 입력되지 않았습니다. 우편번호찾기 버튼을 눌러 우편번호를 찾아주십시오");
					document.reg.zipcode.focus();
					return false ;
				}
				if(!address1){
					alert("주소가 입력되지 않았습니다. 우편번호찾기 버튼을 눌러 주소를 찾아주십시오");
					document.reg.address1.focus();
					return false ;
				}
				if(!address2){
					alert("상세주소가 입력되지 않았습니다.");
					document.reg.address2.focus();
					return false ;
				}
				var con = confirm("잘못 입력한 것은 없습니까?");
				if(!con){
					return false;	
				}
			},
			"success":function(mto){
				alert("가입되셨습니다.");
				location.href="/Yogiro/index.jsp";
			},
			"error":function(xhr, status, error){
				alert("실패: "+error);
			},
		});
	});
	$("#bir").datepicker({
		"dateFormat":"yy-mm-dd",
		changeMonth: true,
		changeYear: true,
	});
	$.datepicker.regional['ko']= {
	          closeText:'닫기',
	          prevText:'이전달',
	          nextText:'다음달',
	          currentText:'오늘',
	          monthNames:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
	          monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
	          dayNames:['일','월','화','수','목','금','토'],
	          dayNamesShort:['일','월','화','수','목','금','토'],
	          dayNamesMin:['일','월','화','수','목','금','토']};
	    
	    $.datepicker.setDefaults( $.datepicker.regional[ 'ko' ] );
	$("#findZipcode").on("click",function(){
		window.open("member/find_zipcode.jsp","","new,width=400,height=450"


);
	});
	$("#registerId").on("keyup",function(){
		var id = $("#registerId").val();
		var span =document.getElementById("idchk");
		$.ajax({
			"url":"member.do",
			"type":"post",
			"data":{"method":"serchId","id":id},
			"dataType":"json",
			"success":function(mto){
				if(mto!=null){
					span.innerHTML = "<font size='2' color='red'>이미 사용중인 ID입니다.</font> ";
					return;
					}else{
						span.innerHTML = "<font size='2' color='blue'>사용가능한 ID입니다.</font> ";
						return;
				}
			}
		});
	});
	$("#detailchk").on("keyup",function(){
		var num = $("#detailchk").val();
		var chk = document.getElementById("numchk");
		if(num.length!=7){
			chk.innerHTML = "<font size='2' color='red'>7자리 숫자를 입력해 주십시요</font> ";
			return;
		}else{
			chk.innerHTML = "<font size='2' color='blue'>우편번호찾기를 통해 주소를 검색하세요</font> ";
		}
	});
});
</script>
<style type="text/css">
 table, tr, td, h2{
 	font-family: LexiGulimWeb; 
 	font-size: 15px;
 	font-weight: bold;
 	padding-right: 5px;
 }
 td{
 	padding-left: 5px;
 }
 .button {
	display: inline-block;
	position: relative;
	margin: 10px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(255,255,255,.22);
	font-family: "Trebuchet MS", LexiGulimWeb, sans-serif;
	font-size: 16px;

	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;

	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
	box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);

	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}

	.button:hover {
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
		box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
	}

	.button:active {
		-webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
		-moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
		box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
	}
.coral {
	color: #3e5706;

	background: #FFA07A ; /* Old browsers */
}
 
</style>
</head>
<body>
<hr color="#DCDCDC">
<h2 align="center" style="font-size: 30px">회원 가입</h2>
<hr color="#DCDCDC">
<br>
<form name="reg">

<table border="0" cellspacing="0" style="border:solid #aeb3b6;" align="center">
<tr><td style="background-color:#DCDCDC; height:40px; width:180px;">ID </td><td style="border-bottom: 1px dashed gray;"><input type="text" name="id" size="15" id="registerId" style="border:solid 1px #aeb3b6; height:20px;"><span id="idchk"></span></tr>
<tr><td style="background-color:#DCDCDC; height:40px;">비밀번호  </td><td style="border-bottom: 1px dashed gray;"> <input type="password" name="password" id="registerPwd" style="border:solid 1px #aeb3b6; height:20px;"></td></tr>
<tr><td style="background-color:#DCDCDC; height:40px;">이름 </td><td style="border-bottom: 1px dashed gray;"><input type="text" name="name" id="name" style="border:solid 1px #aeb3b6; height:20px;"></td></tr>
<tr><td style="background-color:#DCDCDC; height:40px;">생년월일(주민등록상의)</td><td style="border-bottom: 1px dashed gray;"><input type="text" name="brithday" id="bir" style="border:solid 1px #aeb3b6; height:20px;"></td></tr>
<tr><td style="background-color:#DCDCDC; height:40px;">주민등록번호(뒷자리)</td><td style="border-bottom: 1px dashed gray;"><input type="text" name="detail" id="detailchk" style="border:solid 1px #aeb3b6; height:20px;"><span id="numchk"></span></tr>
<tr><td style="background-color:#DCDCDC; height:40px;">우편번호 </td><td style="border-bottom: 1px dashed gray;"><input type="text" name="zipcode" size="5" id="zipcode" style="border:solid 1px #aeb3b6; height:20px;"><input type="button" value="우편번호 찾기" id="findZipcode" class="button coral"></td></tr>
<tr><td style="background-color:#DCDCDC; height:40px;">주소 </td><td style="border-bottom: 1px dashed gray;"><input type="text" name="address1" size="80" id="address1" style="border:solid 1px #aeb3b6; height:20px;"></td></tr>
<tr><td style="background-color:#DCDCDC; height:40px;">상세주소 </td><td><input type="text" name="address2" id="address2" style="border:solid 1px #aeb3b6; height:20px;"></td></tr>
<div align="center">
<input type="button" value="확인" id="register" class="button coral">
<input type="reset" value="초기화" class="button coral">
</div>
</form>
</body>
</html>